<template>
  <div id="evaluation">
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p class="count-title">{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
        </Card>
      </i-col>
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
        </Card>
      </i-col>
    </Row>
    <div class="content">
      <div class="search">
        <div class="searchname">课程搜索</div>
        <div class="searchbox">
          <Input class="search-input" search enter-button placeholder="Enter something..." @on-click="search" />
        </div>
        <div class="condition">
          <span class="name">综合排序:</span>
          <ul class="order">
            <li :class="{'active':currentIndex===0}" @click="selectItem(0)">按时间降序</li>
            <li :class="{'active':currentIndex===1}" @click="selectItem(1)">按时间升序</li>
            <li :class="{'active':currentIndex===2}" @click="selectItem(2)">按播放次数升序</li>
            <li :class="{'active':currentIndex===3}" @click="selectItem(3)">按播放次数降序</li>
          </ul>
        </div>
      </div>
      <div class="desc">
        <ul class="wrap">
          <li class="item" v-for="item in 10"  @click="goDetail">
            <Card>
              <div class="leftpart">
                <span class="placeholder"></span>
                <Icon type="logo-youtube" />
                <span>XX综合模拟演练</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>上课时间：2018年7月10日</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>讲师：张某某</span>
              </div>
              <div class="rightpart">
                <span class="placeholder"></span>
                <span>专家评论：9条</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>学员评论：37条</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>好评度：</span>
                <Rate allow-half v-model="2.5" />
              </div>
            </Card>
          </li>
        </ul>
      </div>
      <div class="page">
        <Page :total="100" />
      </div>
    </div>
  </div>
</template>
<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
export default {
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar
  },
  data() {
    return {
      inforCardData: [
        {
          title: '累计上课',
          icon: 'ios-book-outline',
          count: 803,
          color: '#2d8cf0'
        },
        {
          title: '五星好评课程',
          icon: 'md-thumbs-up',
          count: 232,
          color: '#19be6b'
        },
        {
          title: '累计专家参与评论',
          icon: 'ios-people',
          count: 142,
          color: '#ff9900'
        },
        {
          title: '累计学生参与评论',
          icon: 'md-school',
          count: 657,
          color: '#ed3f14'
        }
      ],
      pieData: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      },
      currentIndex: -1
    }
  },
  methods: {
    search() {
      console.log('search')
    },
    // 筛选
    selectItem(index) {
      this.currentIndex = index
    },
    goDetail() {
      console.log(111)
      this.$router.push({
        name: 'course-details'
      })
    }
  }
}
</script>
<style lang="scss">
#evaluation {
  padding: 40px;
  .count-style {
    font-size: 50px;
  }
  .content {
    .search {
      display: flex;
      height: 40px;
      line-height: 40px;
      margin-bottom: 20px;
      .searchname {
        width: 80px;
        height: 32px;
        font-size: 18px;
      }
      .searchbox {
        width: 200px;
        height: 40px;
        font-size: 0;
        .search-input {
          position: relative;
          top: 4px;
        }
      }
      .condition {
        display: flex;
        font-size: 18px;
        height: 40px;
        padding-left: 40px;
        .name {
          padding: 0 10px;
        }
        .order {
          display: flex;
          li {
            padding: 0 10px;
            box-sizing: border-box;
            cursor: pointer;
            &:hover {
              color: #57a3f3;
              border-bottom: 2px solid #57a3f3;
            }
            &.active {
              color: #57a3f3;
              border-bottom: 2px solid #57a3f3;
            }
          }
        }
      }
    }
    .desc {
      .wrap {
        .item {
          margin-bottom: 20px;
          .ivu-card {
            cursor: pointer;
            .ivu-card-body {
              display: flex;
              .leftpart {
                width: 50%;
                .ivu-icon {
                  font-size: 30px;
                  vertical-align: middle;
                  color: #2d8cf0;
                }
                span {
                  vertical-align: middle;
                }
              }
              .rightpart {
                width: 50%;
                text-align: right;
                span {
                  vertical-align: middle;
                }
                .ivu-rate {
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
    .page {
      text-align: center;
      padding-top: 40px;
    }
  }
}
</style>
